import './index.css'
import React, { useState, useEffect } from 'react';
import { Input, Button, DatePicker, Select, Table, Tag, Space, Pagination, Breadcrumb } from 'antd';
// import Roter from '../components/Rater'
import Rater from './components/Rater';
import ModalseeA from './components/ModalseeA/ModalseeA'
import ModalseeA2 from './components/ModalseeA2/ModalseeA2'
import http from '../../../utils/http';
import Search from 'antd/lib/input/Search';
function EvaluationList() {

    let [TimeL, setTimeL] = useState(''); //时间
    let [TimeH, setTimeH] = useState(''); //时间
    let [orderNum,setorderNum ]=useState('');  //订单编号
    let [name,setname ]=useState(''); 
    let [userName,setuserName ]=useState(''); 

    //eva_time时间
    const { RangePicker } = DatePicker;
    function onChangeT(value, dateString) {
        // console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        setTimeL(dateString[0])
        setTimeH(dateString[1])
    }
    function onOk(value) {
        // console.log('onOk: ', value);
    }

    // 编号：
    const onchangeNum=(value)=>{
        // console.log(value.target.value);
        setorderNum(value.target.value);
    }
    
    // 用户
    const onchangeuser=(value)=>{
        // console.log(value.target.value);
        setuserName(value.target.value)
    }

    // 陪护员
    const onchange_escort=(value)=>{
        // console.log(value.target.value);
        setname(value.target.value)
    }

   // 筛选
    const Search=()=>{
        http({
            url: '/Evaluation/search',
            method: 'get',
            data: {
                orderNum: orderNum,
                name: name,
                page: page,
                pageSize: pageSize,
                TimeL: TimeL,
                TimeH: TimeH,
                userName:userName
            },
        }).then((res) => {
            stecolumns(res.data);
            console.log(res.data);
        })
    }
    

    // 下拉框
    const { Option } = Select;
    function handleChange(value) {
        console.log(`selected ${value}`);
    }

    const [activeUser, changeUser] = useState("Chris")

    let [page, setpage] = useState(1)
    let [pageSize, setpageSize] = useState(10)
    let [total, stetotal] = useState('')

    // 条数
    const pagingtotal = () => {
        http({
            url: '/Evaluation/count',
            method: 'get',
        }).then((res) => {
            stetotal(res.data[0].count)
            // if(res.data[0].count%10==0){
            //     if((res.data[0].count/10)==1){
            //         setpage(res.data[0].count/10)
            //         console.log(res.data[0].count/10);
            //         setpage(1)
            //     }else{
            //         setpage(page-1) 
            //         console.log(page);
            //     }
            // }
        })
    }


    const fn = () => {
        // console.log(page);
        http({
            url: '/Evaluation/list',
            method: 'get',
            data: {
                page: page,
                pageSize: pageSize
            }
        }).then((res) => {
            // res.data && res.data.forEach((v, i) => {
            //     v.state == 1 ? v.state = "启用" : v.state = "禁用"
            //     v.Numerical_range = `${res.data[i].Lower_limit_of_value}-${res.data[i].Upper_limit_of_value}`
            // });
            stecolumns(res.data)
            // let 
        })
    }

    // 挂载
    const [columnsdata, stecolumns] = useState('')
    useEffect(() => {
        fn()
        pagingtotal()
    }, [page])

    const paging = (page, pageSize) => {
        setpage(page)
        fn()
    }


    //表格
    const columns = [
        {
            title: '订单编号',
            dataIndex: "orderNum",
            key: "orderNum",
            // render: text => <a>{text}</a>,
        },
        {
            title: 'ID',
            dataIndex: "order_id",
            key: "order_id",
        },
        {
            title: '姓名',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '服务类型',
            dataIndex: 'serviceName',
            key: 'serviceName',
        },
        {
            title: '陪护员',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '评分',
            // dataIndex: 'professionalDegree',
            // dataIndex: <Roter content={professionalDegree}/>,
            key: 'scoprofessionalDegreere ',
            render: (text, record) => (
                <Space size="middle">
                    <Rater content={record} />
                </Space>
            ),
            fixed: 'center',
            width: 250,
        },
        {
            title: '评分时间',
            dataIndex: 'eva_time',
            key: 'eva_time',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <ModalseeA content={record} />
                    <ModalseeA2 content={record} />
                </Space>
            ),
        },
    ];


    const data = [
        {
            OrderNo: 'CJR2139987',
            ID: 'CJR-001',
            Name: '张思',
            Servicetype: '理发',
            Chaperone: '李思',
            score: <Rater />,
            ScoringTime: '2018-11-08 19:22:09',
            ServiceDuration: '大于一小时',
            ServiceAttitude: '满意',
            ProfessionalLevel: '专业',
            conten: {
                speak: '服务还可以',
                Img: 'http://cloud.axureshop.com/gsc/F1QYHV/75/35/36/753536a5db104f998314ad4fdfaf589e/images/评价列表/u11533.png?token=035e054faf0edd9bb565413afac4da87b77e3b83adc05675ce9a19bc49f14019'
            }
        },
    ];
    return (
        <div id="EvaluationListBox">
            {/* <div>健康数据</div> */}
            <p>健康数据</p>
            <div className="Breadcrumb">
                <Breadcrumb>
                    {/* <Breadcrumb.Item>健康管理</Breadcrumb.Item> */}
                    <Breadcrumb.Item>
                        <a href="">评价管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">评价列表</a>
                    </Breadcrumb.Item>
                    {/* <Breadcrumb.Item>An Application</Breadcrumb.Item> */}
                </Breadcrumb>
            </div>
            <div id="h1_shuruT " className="h1_shuru ">
                <div>
                    <span className=" h1_shuru_ss">时间</span>
                    {/* <DatePicker className="h1_shuru_c1" showTime onChange={onChange} onOk={onOk} placeholder="请选择日期" /> */}
                    <Space direction="vertical" size={12}>
                        <RangePicker
                            className="h1_shuru_c1_time_s"
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            onChange={onChangeT}
                            onOk={onOk}
                        />
                    </Space>
                </div>
                <div>
                    <span className="h1_shuru_s">编号</span>
                    <Input className="h1_shuru_c1" onChange={onchangeNum} placeholder="请输入编号" />
                </div>
                <div>
                    <span className="h1_shuru_s">用户</span>
                    <Input className="h1_shuru_c1" onChange={onchangeuser} placeholder="请输入姓名 " />
                </div>
                <div>
                    <span className="h1_shuru_s">陪护员</span>
                    <Input className="h1_shuru_c1" onChange={onchange_escort}  placeholder="请输入陪护员 " />
                </div>
                <div>
                    <Button size="small" onClick={Search} className="h1_shuru_c4" type="primary">筛选</Button>
                </div>
            </div>
            <Table
                rowKey="olderly_id"
                columns={columns}
                dataSource={columnsdata}
                pagination={false} />
            <div className="Pagination">
                <Pagination
                    onChange={paging}
                    total={total}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共${total}`}
                />
            </div>


            {/* <Modal cancelText='返回' okText='确认' width="715px" title={<CustomTitle3 ></CustomTitle3>} visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2} footer={[
                <Button id="ModalseeS3Btn1" key="back" onClick={handleCancel2}>返回</Button>,
                <Button id="ModalseeS3Btn2" key="submit" type="primary" onClick={handleOk2}>
                    确认
                </Button>,
            ]}>
                {<ModalseeA2></ModalseeA2>}
            </Modal> */}
        </div>
    )
}
export default EvaluationList